<template>
  <el-dialog
    v-model="dialogVisible"
    :title="`设定`"
    width="80%"
    :before-close="handleClose"
  >
    <el-table
      :data="tableData.value"
      v-if="tableData.value?.length"
      stripe
      style="width: 100%"
    >
      <el-table-column fixed label="序号" width="180">
        <template #default="scope">
          <el-input v-model="scope.row.number" placeholder="请输入" />
        </template>
      </el-table-column>
      <el-table-column fixed label="学校" width="180">
        <template #default="scope">
          <el-select
            v-model="scope.row.school"
            placeholder="Select"
            style="width: 140px"
          >
            <el-option label="学校一1" value="学校1" />
            <el-option label="学校一2" value="学校2" />
            <el-option label="学校一3" value="学校3" />
          </el-select>
        </template>
      </el-table-column>
      <!-- <el-table-column prop="name" label="Name" width="180" /> -->
      <el-table-column
        :label="item.name"
        v-for="item in tableData.value[0].children"
        :key="item.id"
      >
        <template #default>
          <el-input-number
            v-model="item.fraction"
            :min="0"
            placeholder="请输入分数"
          />
        </template>
      </el-table-column>
    </el-table>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose()">取消</el-button>
        <el-button type="primary" @click="submit"> 提交 </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import { raterList, score } from "../../api/api";
let props = defineProps(["dialogVisible", "maxnum", "tabdata", "linkid"]);
let dialogVisible = ref(props.dialogVisible);
let emit = defineEmits(["cancal"]);

const getrater = () => {
  raterList().then((res) => {
    console.log(props.tabdata);
    if (props.tabdata?.length > 0) {
      tableData.value = props.tabdata;

      if (props.tabdata?.length < res.data.length) {
        console.log(res.data, tableData.value[0].children);
        let arr = [];
        res.data.forEach((itema: any, indexa: any) => {
          let is = false;
          tableData.value[0].children.forEach((itemb: any, indexb: any) => {
            if (itema.id == itemb.rater_id) {
              is = true;
            }
          });
          console.log(is);
          if (!is) {
            // tableData.value[0].children.push({ number: '', children: res.data })
            arr.push(itema.id);
          }
        });

        arr.forEach((item: any, index: number) => {
          tableData.value[0].children.push({
            number: tableData.value[0].children[0]?.number,
            fraction: "",
            rater_id: item,
          });
        });
      }

      res.data.forEach((item: any, index: number) => {
        tableData.value[0].children[index].name = item.name;
      });
    } else {
      tableData.value.push({ number: "", children: res.data });
    }
  });
};
getrater();
const tableData: any = reactive({ value: [] });

let handleClose = () => {
  dialogVisible.value = false;
  emit("cancal");
};

const submit = () => {
  console.log(tableData?.value[0]?.children);
  tableData?.value[0]?.children.forEach((item: any, index: number) => {
    item.number = tableData?.value[0].number;
    if (!item.rater_id) {
      item.rater_id = item.id;
    }
    if (item.name) {
      delete item.name;
    }
    delete item.id;
  });

  score({ link_id: props.linkid, data: tableData?.value[0].children }).then(
    (res: any) => {
      if (res.code == 200) {
        ElMessage.success("成功");
      } else {
        ElMessage.warning("失败");
      }
      emit("cancal");
    }
  );
};
</script>

<style></style>
